<template>
  <!-- 视频列表 -->
  <div class="warning">
    <div class="warning-main">
      <ul>
        <li style="display: flex">
          <div style="width: 60%">
            <h1>风险等级统计</h1>
            <div id="data1" style="width: 100%; height: 2.3rem"></div>
          </div>
          <div style="width: 40%">
            <h1>矿井安全等级评分</h1>
            <div id="datafen" style="width: 100%; height: 2.3rem"></div>
          </div>
        </li>
        <li style="position: relative">
          <h1>安全风险监测预警统计</h1>
          <div class="risk">
            <div
              id="data2"
              style="
                width: 48%;
                height: 2.3rem;
                margin-top: 0.2rem;
                position: absolute;
                top: 15%;
              "
            ></div>
            <div class="duibiimg">
              <p class="titletext">安全报警次数</p>
              <div class="textcenter">
                <!-- <img src="../../../assets/images/greenjt.png" alt="" /> -->
                <img
                  :src="
                    sensorPointinfo.compare < 0
                      ? require('../../../assets/images/redjt.png')
                      : sensorPointinfo.compare > 0
                      ? require('../../../assets/images/greenjt.png')
                      : sensorPointinfo.compare == '-'
                      ? ''
                      : ''
                  "
                  alt=""
                />
                <p :class="sensorPointinfo.compare < 0 ? 'isred' : ''">
                  {{ sensorPointinfo.compare }}%
                </p>
              </div>
              <div class="textone">
                <p>当天</p>
                <p>{{ sensorPointinfo.now }}次</p>
              </div>

              <div class="texttwo">
                <p>昨日</p>
                <p>{{ sensorPointinfo.yesterday }}次</p>
              </div>
            </div>
            <div style="position: absolute; top: 7%; left: 25%">
              <el-select
                v-model="sensortype"
                placeholder="传感器类型"
                style="
                  width: 150px;
                  margin-left: 0.2rem;
                  margin-bottom: 0.15rem;
                "
                filterable
                @change="changeType"
              >
                <el-option label="请选择" value=""></el-option>
                <el-option
                  v-for="item in sensortypeList"
                  :key="item.type"
                  :label="item.typeName"
                  :value="item.type"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="sensorPoint"
                placeholder="请选择工作面"
                style="width: 150px; margin-left: 0.2rem"
                filterable
                @change="changePoint"
              >
                <el-option label="请选择" value=""></el-option>
                <el-option
                  v-for="item in sensorPointList"
                  :key="item.ssTransducerCode"
                  :label="item.ssTransducerPoint"
                  :value="item.ssTransducerCode"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li style="position: relative;">
          <h2
            @click="getdemo"
            style="position:absolute;width: 196px;height: 30px;right: 0px;top: -8px;cursor: pointer;"
          ></h2>
          <div class="head">
            <h1>瓦斯浓度实时预测</h1>
            <el-select
              v-model="ssTransducerPoint"
              placeholder="请选择工作面"
              style="width: 150px; margin-left: 3.3rem"
              filterable
              @change="changesensor"
            >
              <el-option label="请选择" value=""></el-option>
              <el-option
                v-for="item in sensorList"
                :key="item.ssTransducerCode"
                :label="item.ssTransducerPoint"
                :value="item.ssTransducerCode"
              >
              </el-option>
            </el-select>
          </div>
          <div class="text1">
            <p>{{ name }}浓度值实时预测</p>
            <el-tooltip
              class="item"
              effect="light"
              :content="text"
              placement="top"
            >
              <p>
                {{ text }}
              </p>
            </el-tooltip>
          </div>
          <div
            id="data3"
            style="width: 100%; height: 1.7rem; margin-top: 0.2rem"
          ></div>
        </li>
        <li>
          <div class="head">
            <h1>矿领导下井时长统计</h1>
            <el-date-picker v-model="startDate" type="date" placeholder="选择日期" :picker-options="pickerOptionsStart" style="margin-left: 20px;" @change="changedate">
            </el-date-picker>
            <!-- <el-select
              v-model="psPersonCard"
              placeholder="请选择人员"
              style="width: 150px; margin-left: 3.3rem"
              filterable
              clearable
              @change="getList(psPersonCard)"
            >
              <el-option
                v-for="item in personsList"
                :key="item.psPersonCard"
                :label="item.psPersonName"
                :value="item.psPersonCard"
              >
              </el-option>
            </el-select> -->
          </div>
          <div id="data4" style="height: 2.2rem; "></div>
          <!-- <div class="text">
            <p>{{ data2text }}</p>
          </div> -->
        </li>
        <li>
          <!-- <div class="head"> -->
          <h1>产量与总回风瓦斯浓度分析</h1>
          <!-- <el-select
              v-model="ssTransducerPoints"
              placeholder="请选择工作面"
              style="width: 150px; margin-left: 3rem"
              filterable
              @change="changesensors"
            >
              <el-option label="请选择" value=""></el-option>
              <el-option
                v-for="item in sensorLists"
                :key="item.ssTransducerCode"
                :label="item.ssTransducerPoint"
                :value="item.ssTransducerCode"
              >
              </el-option>
            </el-select>
          </div>
          <div style="display: flex">
            <div id="data5" style="width: 50%; height: 2.2rem"></div>
            <div id="datayield" style="width: 50%; height: 2.2rem"></div>
          </div> -->
          <div style="width:100%;height: 2.5rem; margin-top: -0.2rem;display: flex;">
            <div style="width:50%;">
              <div id="data7" style="height: 2.2rem; margin-top: 0.2rem"></div>
            </div>
            <div style="width:50%;">
              <div id="data8" style="height: 2.2rem; margin-top: 0.2rem"></div>
            </div>
            <!-- <el-table
              :data="tableData"
              style="margin-top: 15px"
              class="backtable"
              height="2.5rem"
            >
              <el-table-column label="序号" width="80" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="传感器类型"
                align="center"
                prop="equipmentName"
              />
              <el-table-column
                label="传感器安装位置"
                align="center"
                prop="warehousingDate"
              >
              </el-table-column>
              <el-table-column
                label="突变类型"
                align="center"
                prop="equipmentNum"
              />
              <el-table-column
                label="突变次数"
                align="center"
                prop="equipmentNum"
              />
              <el-table-column
                label="日期"
                align="center"
                prop="equipmentNum"
              />
            </el-table> -->
          </div>
        </li>
        <li>
          <h1>下井人员异常分析</h1>
          <div id="data6" style="height: 2.5rem; margin-top: -0.2rem"></div>
        </li>
      </ul>
    </div>
    <el-dialog :visible.sync="personpolice" width="75%" title="下井人员异常分析详情" @close="handleClose">
      <el-table :data="PersonList" class="backtable" height="600">
        <el-table-column label="序号" width="70" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
       <el-table-column
          prop="ps_person_name"
          label="姓名"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="ps_person_post"
          label="岗位"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="ps_person_duty"
          label="工种/职务"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="ps_mine_entertime"
          label="入井时间"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="ps_mine_outtime"
          label="出井时间"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="ps_enter_duration"
          label="异常原因"
          show-overflow-tooltip
          align="center"
        >
        </el-table-column> -->
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  components: {},
  data() {
    return {
      personpolice:false,
      PersonList:[],
      data2text: "",
      sensorList: [],
      personsList: [],
      psPersonCard:'',
      sensorPointList: [],
      sensortypeList: [],
      sensorPointinfo: {},
      sensortype: "",
      sensorPoint: "",
      ssTransducerPoint: "",
      name: "",
      img: "../../../assets/images/light.svg",
      text:
        "围绕能够反应煤矿采煤工作面瓦斯浓度突变危险性的静态影响因子，并实时获取动态影响因子的监测数据，简历采煤工作面瓦斯浓度预测模型。将预测值与《AQ1029-2019》中对甲烷传感器报警浓度，断电浓度规则进行对比，确定预测状态。",
      sensorLists: [],
      ssTransducerPoints: "",
      // tableData: [],
      personform: {
        date: ""
      },
      startDate: "",//开始日期
      pickerOptionsStart: {
          disabledDate: (time) => {
              let maxDate = new Date().getTime()//拿到输入的结束日期
              return time.getTime()>maxDate //判断大于结束日期 返回true 禁用
          }
      },
      datetime:''
    };
  },
  mounted() {
    const timeOne = new Date();
    const year = timeOne.getFullYear();
    let month = timeOne.getMonth() + 1;
    let day = timeOne.getDate();
    month = month < 10 ? "0" + month : month;
    day = day < 10 ? "0" + day : day;
    this.personform.date = `${year}-${month}-${day}`;
    this.getList('');
    this.getsensorList();
    this.getleaderyc()
    this.getzonghuifeng()
    this.getchanliang()
    this.getdownpeple();
    this.getsensortype();
    this.getdata1();
    this.getdata();
    this.getsensortypes();
    // this.getyield()
    // this.getyields()
  },
  methods: {
    handleClose() {
      this.PersonList = []
    },
    getdemo() {
      this.$notify({
        title: "警告",
        message: "36108主运切眼回风流甲烷正在进行预警，预警值为：0.45CH4%.",
        type: "warning",
        position: "bottom-right"
      });
    },
    // 获取传感器类型
    getsensortypes() {
      this.$http.get("/dynamic/warning/syjList").then(res => {
        if (res.code === 200) {
          this.sensorLists = res.data;
          this.ssTransducerPoints = this.sensorLists[0].ssTransducerCode;
          this.getyield(this.ssTransducerPoints);
          this.getyields(this.ssTransducerPoints);
        }
      });
    },
    getdata() {
      var chartfen = echarts.init(document.getElementById("datafen"));
      /* 请不要再此基础上进行修改和保存自己修改的内容，若想修改克隆一份*/
      var data = "";
      var dataArr = 100;
      if (data == undefined) {
        dataArr = 0;
      }
      var colorSet = {
        color: "#468EFD"
      };
      // var text

      var optionfen = {
        backgroundColor: "#0000",
        title: {
          show: true,
          text: "",
          x: "49%",
          y: "55%",
          z: 8,
          textAlign: "center",
          textStyle: {
            color: " rgb(147,169,205) ",
            fontSize: 26
          }
        },
        grid: {
          width: "70%",
          height: "100%"
          // top:'10'
        },
        series: [
          {
            name: "内部进度条",
            type: "gauge",
            // center: ['20%', '50%'],
            radius: "58%",

            splitNumber: 10,
            axisLine: {
              lineStyle: {
                color: [
                  [dataArr / 100, colorSet.color],
                  [1, "#111F42"]
                ],
                width: 8
              }
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },

            pointer: {
              show: false
            }
          },
          {
            name: "",
            type: "gauge",
            //  center: ['20%', '50%'],
            radius: "80%",
            min: 0, // 最小刻度
            max: 100, // 最大刻度
            splitNumber: 10, // 刻度数量
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: [[1, "rgba(0,0,0,0)"]]
              }
            },
            // 仪表盘轴线
            axisLabel: {
              show: true,
              color: "#4d5bd1",
              distance: 25,
              formatter: function(v) {
                switch (v + "") {
                  case "0":
                    return "0";
                  case "10":
                    return "10";
                  case "20":
                    return "20";
                  case "30":
                    return "30";
                  case "40":
                    return "40";
                  case "50":
                    return "50";
                  case "60":
                    return "60";
                  case "70":
                    return "70";
                  case "80":
                    return "80";
                  case "90":
                    return "90";
                  case "100":
                    return "100";
                }
              }
            }, // 刻度标签。
            axisTick: {
              show: true,
              splitNumber: 7,
              lineStyle: {
                color: colorSet.color, // 用颜色渐变函数不起作用
                width: 1
              },
              length: -8
            }, // 刻度样式
            splitLine: {
              show: true,
              length: -20,
              lineStyle: {
                color: colorSet.color // 用颜色渐变函数不起作用
              }
            }, // 分隔线样式
            detail: {
              show: false
            },
            pointer: {
              show: false
            }
          },
          /* 内部*/
          {
            type: "pie",
            radius: ["0", "35%"],
            center: ["50%", "50%"],
            z: 8,
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: "100",
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: "#4FADFD"
                      },
                      {
                        offset: 1,
                        color: "#28E8FA"
                      }
                    ])
                  }
                },
                label: {
                  normal: {
                    rich: {
                      a: {
                        color: "#fff",
                        align: "center",
                        fontSize: 40,
                        fontWeight: "bold"
                      }
                    },
                    formatter: function(params) {
                      return "{a|" + params.value + "}";
                    },
                    position: "center",
                    show: true
                  }
                },
                labelLine: {
                  show: false
                }
              }
            ]
          },
          /* 外一层*/
          {
            type: "pie",
            radius: "40%",
            startAngle: 220,
            endAngle: -40,
            hoverAnimation: false,
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 1
              }
            ],
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(69, 161, 255,0.8)"
                    },
                    {
                      offset: 1,
                      color: "rgba(69, 161, 255,0.5)"
                    }
                  ]
                }
              }
            }
          },
          // 外二层圈
          {
            type: "pie",
            radius: "45%",
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            z: 0,
            hoverAnimation: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 1
              }
            ],
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(69, 161, 255,0.5)"
                    },
                    {
                      offset: 1,
                      color: "rgba(69, 161, 255,0.3)"
                    }
                  ]
                }
              }
            }
          },
          // 最外层圈
          {
            type: "pie",
            radius: "50%",
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            z: 0,
            hoverAnimation: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 1
              }
            ],
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(69, 161, 255,0.3)"
                    },
                    {
                      offset: 1,
                      color: "rgba(69, 161, 255,0)"
                    }
                  ]
                }
              }
            }
          }
        ]
      };

      chartfen.setOption(optionfen);
    },
    changesensors(e) {
      this.getyield(e);
      this.getyields(e);
    },
    getyield(e) {
      this.$http
        .get("/dynamic/warning/yieldAndWasi?ssTransducerCode=" + e)
        .then(res => {
          if (res.code === 200) {
            var chart5 = echarts.init(document.getElementById("data5"));
            // Generate data
            var category = res.data.date;
            var dottedBase = [];
            var lineData = res.data.outputDayList;
            var barData = res.data.val;
            var rateData = [];
            32808;
            for (var i = 0; i < 33; i++) {
              // var date = i+2001;
              // category.push(date)
              var rate = (barData[i] / lineData[i]) * 100;
              rateData[i] = rate.toFixed(2);
            }

            // option
            var option5 = {
              title: {
                text: "",
                x: "center",
                y: 0,
                textStyle: {
                  color: "#B4B4B4",
                  fontSize: 16,
                  fontWeight: "normal"
                }
              },
              backgroundColor: "#0d235e00",
              tooltip: {
                trigger: "axis",
                backgroundColor: "rgba(255,255,255,0.1)",
                axisPointer: {
                  type: "shadow",
                  label: {
                    show: true,
                    backgroundColor: "#7B7DDC"
                  }
                }
              },
              legend: {
                data: ["产量"],
                textStyle: {
                  color: "#B4B4B4"
                },
                top: "7%"
              },
              grid: {
                top: "40",
                left: "50",
                right: "50",
                bottom: "25"
              },
              xAxis: {
                data: category,
                axisLine: {
                  lineStyle: {
                    color: "#fff"
                  }
                },
                axisTick: {
                  show: false
                }
              },
              yAxis: [
                {
                  name: "单位：吨",
                  splitLine: { show: false },
                  axisLine: {
                    lineStyle: {
                      color: "#fff"
                    }
                  },

                  axisLabel: {
                    formatter: "{value} "
                  }
                }
              ],

              series: [
                {
                  name: "产量",
                  type: "bar",
                  barWidth: 10,
                  itemStyle: {
                    normal: {
                      barBorderRadius: 5,
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: "#956FD4" },
                        { offset: 1, color: "#3EACE5" }
                      ])
                    }
                  },
                  data: lineData
                }
              ]
            };

            chart5.setOption(option5);
          }
        });
    },
    getyields(e) {
      this.$http
        .get("/dynamic/warning/yieldAndWasi?ssTransducerCode=" + e)
        .then(res => {
          if (res.code === 200) {
            var chart5 = echarts.init(document.getElementById("datayield"));
            // Generate data
            var category = res.data.time;
            var dottedBase = [];
            var lineData = res.data.outputDayList;
            var barData = res.data.val;
            var rateData = [];
            32808;
            for (var i = 0; i < 33; i++) {
              // var date = i+2001;
              // category.push(date)
              var rate = (barData[i] / lineData[i]) * 100;
              rateData[i] = rate.toFixed(2);
            }

            // option
            var option5 = {
              title: {
                text: "",
                x: "center",
                y: 0,
                textStyle: {
                  color: "#B4B4B4",
                  fontSize: 16,
                  fontWeight: "normal"
                }
              },
              backgroundColor: "#0d235e00",
              tooltip: {
                trigger: "axis",
                backgroundColor: "rgba(255,255,255,0.1)",
                axisPointer: {
                  type: "shadow",
                  label: {
                    show: true,
                    backgroundColor: "#7B7DDC"
                  }
                }
              },
              legend: {
                data: ["瓦斯"],
                textStyle: {
                  color: "#B4B4B4"
                },
                top: "7%"
              },
              grid: {
                top: "40",
                left: "50",
                right: "50",
                bottom: "25"
              },
              xAxis: {
                data: category,
                axisLine: {
                  lineStyle: {
                    color: "#fff"
                  }
                },
                axisTick: {
                  show: false
                }
              },
              yAxis: [
                {
                  name: "瓦斯(%)",
                  splitLine: { show: false },
                  axisLine: {
                    lineStyle: {
                      color: "#fff"
                    }
                  },
                  axisLabel: {
                    formatter: "{value} "
                  }
                }
              ],

              series: [
                {
                  name: "瓦斯",
                  type: "line",
                  barWidth: 10,
                  itemStyle: {
                    normal: {
                      barBorderRadius: 5,
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: "#956FD4" },
                        { offset: 1, color: "#3EACE5" }
                      ])
                    }
                  },
                  data: barData
                }
              ]
            };
            chart5.setOption(option5);
          }
        });
    },
    // 获取传感器类型
    getsensortype() {
      this.$http.get("/dynamic/warning/transducerType").then(res => {
        if (res.code === 200) {
          this.sensortypeList = res.data;
          this.sensortype = this.sensortypeList[0].type;
          this.getPoint(this.sensortype);
          this.getPoints(this.sensortype);
        }
      });
    },
    getPoints(e) {
      this.$http
        .get("/dynamic/warning/safeRiskDynamicTwo?type=" + e)
        .then(res => {
          if (res.code === 200) {
            this.sensorPointinfo = res.data;
          }
        });
    },
    getPoint(e) {
      this.$http.get("/dynamic/warning/transducerList?type=" + e).then(res => {
        if (res.code === 200) {
          this.sensorPointList = res.data;
          this.sensorPoint = this.sensorPointList[0].ssTransducerCode;
          this.changePoint(this.sensorPoint);
        }
      });
    },
    // 选择传感器类型
    changeType(e) {
      this.getPoints(e);
      this.sensorPoint = "";
      this.$http.get("/dynamic/warning/transducerList?type=" + e).then(res => {
        if (res.code === 200) {
          this.sensorPointList = res.data;
        }
      });
    },
    // 风险分级统计
    getdata1() {
      // this.$http
      //   .get('/dynamic/warning/safeRiskDynamic?ssTransducerCode=' + e)
      //   .then(res => {
      //     if (res.code === 200) {
      var chart1 = echarts.init(document.getElementById("data1"));
      var myColor = [
        "#00c0e9",
        "#0096f3",
        "#d0800e",
        "#eb2100",
        "#00f3bd",
        "#34da62",
        "#d0a00e",
        "#d0800e",
        "#d0570e",
        "#eb3600",
        "#eb2100"
      ];
      var option1 = {
        backgroundColor: "#0e214700",
        grid: {
          top: "22%",
          left: "3%",
          right: "3.5%",
          bottom: "11%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          formatter: function(prams) {
            return (
              prams[0].name + "\n" + "\n" + "数量：" + prams[0].value + "个"
            );
          }
        },
        xAxis: {
          type: "category",
          axisLabel: {
            textStyle: {
              color: "#ffffff",
              fontSize: "14"
            }
          },
          data: ["低风险", "一般风险", "较大风险", "重大风险"],
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "rgba(160,160,160,0.3)"
            }
          }
        },
        yAxis: {
          type: "value",
          name: "单位：个",
          // nameGap: '35',
          nameTextStyle: {
            color: "#ffffff",
            fontSize: "14"
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: "#ffffff",
              fontSize: "14"
            }
          },
          splitLine: {
            lineStyle: {
              color: "rgba(160,160,160,0.3)"
            }
          }
        },
        series: [
          {
            name: "限制高消费",
            type: "bar",
            barWidth: "25%",
            itemStyle: {
              normal: {
                color: function(params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                }
              }
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: "16",
                  color: "#ffffff"
                },
                position: "top"
              }
            },
            data: ["0", "0", "0", "0"]
          }
        ]
      };

      chart1.setOption(option1);
      //     }
      //   })
    },
    // 选择传感器工作面
    // 安全风险监测预警统计
    changePoint(e) {
      this.$http
        .get("/dynamic/warning/safeRiskDynamic?ssTransducerCode=" + e)
        .then(res => {
          if (res.code === 200) {
            console.log(173, res.data);
            var Riskarr = [];

            res.data.val.forEach((item, index) => {
              Riskarr.push([res.data.time[index], parseInt(item)]);
            });
            console.log(177, Riskarr);
            // data: [
            //         {
            //           coords: [
            //             ['1月', 625],
            //             ['2月', 426],
            //             ['3月', 413],
            //             ['4月', 740],
            //             ['5月', 335]
            //           ]
            //         }
            //       ]
            var chart2 = echarts.init(document.getElementById("data2"));
            var img = this.img;
            var option2 = {
              backgroundColor: "#000E1A00",
              title: {
                textStyle: {
                  align: "center",
                  color: "#fff",
                  fontSize: 12
                },
                top: "3%",
                left: "6%"
              },
              tooltip: {
                trigger: "axis"
              },
              legend: {
                show: false,
                color: ["#F58080"],
                data: ["a"],
                left: "center",
                top: "6%",
                textStyle: {
                  color: "#ffffff"
                }
              },
              grid: {
                width: "100%",
                top: "5%",
                left: "3%",
                right: "4%",
                bottom: "20%",
                // height: "80%",
                containLabel: true
              },
              xAxis: {
                type: "category",
                data: res.data.time,
                axisLine: {
                  lineStyle: {
                    color: "#999"
                  }
                },
                axisLabel: {
                  color: "#fff",
                  textStyle: {
                    fontSize: 12
                  }
                }
              },
              yAxis: {
                type: "value",
                // min: 300,
                // max: 850,
                name: "m³",
                splitLine: {
                  show: false,
                  lineStyle: {
                    type: "dashed",
                    color: "#DDD"
                  }
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "#ccc"
                  }
                },
                nameTextStyle: {
                  color: "#fff"
                },
                axisLabel: {
                  color: "#fff",
                  textStyle: {
                    fontSize: 12
                  }
                },
                splitArea: {
                  show: false
                }
              },
              series: [
                {
                  name: "预警统计",
                  type: "line",
                  data: res.data.val,
                  symbol: img,
                  symbol: "circle", // 折线点设置为实心点
                  symbolSize: 10, // 折线点的大小
                  itemStyle: {
                    normal: {
                      borderWidth: 1,
                      color: "#337ded",
                      shadowColor: "#9bfeff",
                      shadowBlur: 9.5
                    }
                  }
                },
                {
                  name: "光点",
                  type: "lines",
                  smooth: true,
                  coordinateSystem: "cartesian2d",
                  polyline: true,
                  effect: {
                    show: true,
                    trailLength: 0,
                    symbol: "arrow",
                    period: 30, // 光点滑动速度
                    symbol: "arrow", // 折线点设置为实心点
                    symbolSize: 15,
                    // symbol: img,
                    color: "#0e0cf7c7",
                    shadowColor: "#9bfeff",
                    shadowBlur: 9.5
                  },
                  lineStyle: {
                    normal: {
                      width: 0,
                      color: {
                        type: "linear",

                        colorStops: [
                          {
                            offset: 0,
                            color: "#58C6F7" // 0% 处的颜色
                          },
                          {
                            offset: 0.4,
                            color: "#17B4FA" // 100% 处的颜色
                          },
                          {
                            offset: 1,
                            color: "#1A6AF2" // 100% 处的颜色
                          }
                        ],
                        globalCoord: false // 缺省为 false
                      },
                      shadowColor: "#056C98",
                      shadowBlur: 1,
                      shadowOffsetY: 0
                    }
                  },
                  data: [
                    {
                      coords: Riskarr
                    }
                  ]
                }
              ]
            };

            chart2.setOption(option2);
          }
        });
    },
    // 总回风瓦斯
    getzonghuifeng(){
      this.$http.get("/safe/safeRealTransducer/halfHourWindCount").then(res => {
        if (res.code === 200) {
          var chart8 = echarts.init(document.getElementById("data8"));
          // Generate data
          var category = res.data.time;
          var lineData = [];
          lineData = res.data.dataList;
          // option
          var option8 = {
            backgroundColor: "#0f375f00",
            title: {
              text: "总回风瓦斯浓度监测",
              textStyle: {
                align: "center",
                color: "#F1F1F3",
                fontSize: 14,
              },
              top: "5%",
              left: "center",
            },
            tooltip: {
              trigger: "axis",
              // formatter: '{b} : {c}' + '人'
              formatter: function(params) {
                  return (
                    "" +
                    params[0].name +
                    "\n" +
                    "\n" +
                    "" +
                    params[0].value +
                    "%"
                  );
              }
            },
            legend: {
              data: ["line", "bar"],
              textStyle: {
                color: "#ccc"
              }
            },
            xAxis: {
              data: category,
              axisLine: {
                lineStyle: {
                  color: "#ccc"
                }
              }
            },
            yAxis: {
              name: "单位（%）",
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#ccc"
                }
              },
              nameTextStyle: {
                  // align: 'center',
                  color: "#F1F1F3",
                  // verticalAlign: 'top',
                  // 这个间距  分别是 上下右左
                  padding: [0, 0, 0, 30],
              },
            },
            grid: {
              bottom: "28",
              top: "50",
              left: "6%",
              right: "5%"
            },
            series: [
              {
                name: "",
                type: "line",
                smooth: true,
                showAllSymbol: true,
                symbol: "emptyCircle",
                symbolSize: 8,
                lineStyle: {
                  normal: {
                    width: 1,
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#cc308c",
                  },
                },
                data: lineData
              }
              // {
              //   name: 'dotted',
              //   type: 'pictorialBar',
              //   symbol: 'rect',
              //   itemStyle: {
              //     normal: {
              //       color: '#0f375f'
              //     }
              //   },
              //   symbolRepeat: true,
              //   symbolSize: [12, 4],
              //   symbolMargin: 1,
              //   z: -10,
              //   data: res.data.personCountList
              // }
            ]
          };
          chart8.setOption(option8);
        }
      });
    },
    // 产量
    getchanliang(){
      this.$http.get("/home/hourMonitoring").then(res => {
        if (res.code === 200) {
          var chart7 = echarts.init(document.getElementById("data7"));
          // Generate data
          var category = res.data.date;
          var lineData = [];
          lineData = res.data.outputHourlist;
          // option
          var option7 = {
            backgroundColor: "#0f375f00",
            title: {
              text: "产量",
              textStyle: {
                align: "center",
                color: "#F1F1F3",
                fontSize: 14,
              },
              top: "5%",
              left: "center",
            },
            tooltip: {
              trigger: "axis",
              // formatter: '{b} : {c}' + '人'
              formatter: function(params) {
                  return (
                    "" +
                    params[0].name +
                    "\n" +
                    "\n" +
                    "" +
                    params[0].value +
                    "吨"
                  );
              }
            },
            legend: {
              data: ["line", "bar"],
              textStyle: {
                color: "#ccc"
              }
            },
            xAxis: {
              data: category,
              axisLine: {
                lineStyle: {
                  color: "#ccc"
                }
              }
            },
            yAxis: {
              name: "单位（吨）",
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#ccc"
                }
              },
              nameTextStyle: {
                  // align: 'center',
                  color: "#F1F1F3",
                  // verticalAlign: 'top',
                  // 这个间距  分别是 上下右左
                  padding: [0, 0, 0, 30],
              },
            },
            grid: {
              bottom: "28",
              top: "20%",
              left: "6%",
              right: "5%"
            },
            series: [
              {
                name: "",
                type: "line",
                smooth: true,
                showAllSymbol: true,
                symbol: "emptyCircle",
                symbolSize: 8,
                lineStyle: {
                  normal: {
                    width: 1,
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#0a82fc",
                  },
                },
                data: lineData
              }
              // {
              //   name: 'dotted',
              //   type: 'pictorialBar',
              //   symbol: 'rect',
              //   itemStyle: {
              //     normal: {
              //       color: '#0f375f'
              //     }
              //   },
              //   symbolRepeat: true,
              //   symbolSize: [12, 4],
              //   symbolMargin: 1,
              //   z: -10,
              //   data: res.data.personCountList
              // }
            ]
          };
          chart7.setOption(option7);
        }
      });
    },
    // 下井人员异常分析
    getdownpeple() {
      this.$http.get("/dynamic/warning/abnormalAnalysis").then(res => {
        if (res.code === 200) {
          var chart6 = echarts.init(document.getElementById("data6"));
          // Generate data
          var category = res.data.time;
          var lineData = [];
          lineData = res.data.personCountList;
          let personlist = []
          personlist = res.data.personList.slice(0,5)
          personlist.forEach(item =>{
            item.name = []
            item.forEach(e=>{
              // item.name = []
              item.name.push(e.ps_person_name)
              // .push(e.ps_person_name)
            })
          })

          console.log(1425,personlist)
          // res.data.personList.forEach(item => {

          // })
          // option
          var option6 = {
            backgroundColor: "#0f375f00",
            tooltip: {
              trigger: "axis",
              // formatter: '{b} : {c}' + '人'
              formatter: function(params) {
                var index = params[0].dataIndex;
                if (params[0].value != 0) {
                  return (
                    "" +
                    params[0].name +
                    "\n" +
                    "\n" +
                    "" +
                    params[0].value +
                    "人" +
                    "</br>" +
                    personlist[index].name.slice(0, 5)
                  );
                } else {
                  return (
                    "" +
                    params[0].name +
                    "\n" +
                    "\n" +
                    "" +
                    params[0].value +
                    "人"
                  );
                }
              }
            },
            legend: {
              data: ["line", "bar"],
              textStyle: {
                color: "#ccc"
              }
            },
            xAxis: {
              data: category,
              axisLine: {
                lineStyle: {
                  color: "#ccc"
                }
              }
            },
            yAxis: {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#ccc"
                }
              }
            },
            grid: {
              bottom: "28",
              top: "50",
              left: "6%",
              right: "5%"
            },
            series: [
              {
                name: "",
                type: "line",
                smooth: true,
                showAllSymbol: true,
                symbol: "emptyCircle",
                symbolSize: 8,
                data: lineData
              }
              // {
              //   name: 'dotted',
              //   type: 'pictorialBar',
              //   symbol: 'rect',
              //   itemStyle: {
              //     normal: {
              //       color: '#0f375f'
              //     }
              //   },
              //   symbolRepeat: true,
              //   symbolSize: [12, 4],
              //   symbolMargin: 1,
              //   z: -10,
              //   data: res.data.personCountList
              // }
            ]
          };
          chart6.setOption(option6);
          // 添加点击事件处理函数
          var that = this
          chart6.on('click', function (params) {
            that.personpolice = true
            that.PersonList = []
            that.PersonList = res.data.personList[params.dataIndex]
              console.log(params,"点击了第 " + params.dataIndex + " 个数据点");
          });
        }
      });
    },
    // 矿领导人员异常分析
    getleaderyc(){
      this.$http.get("/dynamic/warning/leaderList").then(res => {
        if (res.code === 200) {
          this.personsList = res.data;
        }
      });
    },
    // 瓦斯浓度实时预测
    getsensorList() {
      this.$http.get("/dynamic/warning/wasiList").then(res => {
        if (res.code === 200) {
          this.sensorList = res.data;
          this.ssTransducerPoint = this.sensorList[0].ssTransducerCode;
          this.changesensor(this.sensorList[0].ssTransducerCode);
        }
      });
    },
    changesensor(e) {
      this.sensorList.forEach(item => {
        if (e == item.ssTransducerCode) {
          this.name = item.ssTransducerPoint;
        }
      });
      var earlyData = [];

      if (this.name.indexOf("工作面") != -1) {
        earlyData = [
          {
            name: "阈值",
            yAxis: 0.7,
            label: {
              show: "true",
              position: "end",
              formatter: "预警值"
            },
            lineStyle: {
              normal: {
                width: 2,
                color: "yellow"
              }
            }
          }
        ];
      } else if (this.name.indexOf("回风流") != -1) {
        earlyData = [
          {
            name: "阈值",
            yAxis: 0.45,
            label: {
              show: "true",
              position: "end",
              formatter: "预警值"
            },
            lineStyle: {
              normal: {
                width: 2,
                color: "yellow"
              }
            }
          }
        ];
      } else {
        earlyData = [];
      }
      this.$http
        .get("/dynamic/warning/Dynamic?transducerCode=" + e)
        .then(res => {
          if (res.code === 200) {
            // this.sensorList = res.data
            var chart3 = echarts.init(document.getElementById("data3"));
            var option3 = {
              backgroundColor: "#0A165100",
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  lineStyle: {
                    color: "#57617B"
                  }
                }
              },
              legend: {
                // icon: 'diamond',
                itemGap: 13,
                data: ["接口增加量"],
                top: "3%",
                left: "center",
                textStyle: {
                  fontSize: 12,
                  color: "#F1F1F3"
                }
              },
              grid: {
                bottom: "28%",
                top: "13%",
                left: "7%",
                right: "13%"
              },
              xAxis: [
                {
                  type: "category",
                  boundaryGap: false,
                  axisLine: {
                    lineStyle: {
                      color: "#57617B"
                    }
                  },
                  data: res.data.timeList
                }
              ],
              yAxis: [
                {
                  type: "value",
                  axisTick: {
                    show: false
                  },
                  axisLine: {
                    lineStyle: {
                      color: "#57617B"
                    }
                  },
                  splitNumber: 5,
                  // max: 1,
                  axisLabel: {
                    margin: 10,
                    textStyle: {
                      color: "rgba(255,255,255,.6)",
                      fontSize: "12"
                    }
                  },
                  splitLine: {
                    lineStyle: {
                      color: "rgba(255,255,255,0.1)"
                    }
                  }
                }
              ],
              series: [
                {
                  name: "浓度值",
                  type: "line",
                  smooth: true,
                  markLine: {
                    // 最大值和最小值
                    data: earlyData
                  },
                  lineStyle: {
                    normal: {
                      width: 1
                    }
                  },
                  symbol: "circle",
                  symbolSize: 4,
                  itemStyle: {
                    normal: {
                      color: "yellow"
                      // borderColor: 'blue', //拐点边框颜色
                    }
                  },
                  data: res.data.valList
                }
              ]
            };

            chart3.setOption(option3);
          }
        });
    },
    date(time) {
      const nowDate = new Date(time);
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
      };
      const newmonth = date.month > 10 ? date.month : "0" + date.month;
      const newday = date.date > 10 ? date.date : "0" + date.date;
      this.datetime =
        date.year +
        "-" +
        newmonth +
        "-" +
        newday
        
      this.getList(this.datetime)
    },
    changedate(e){
      this.date(e)
    },
    // 矿领导人员异常分析
    getList(date) {
      this.$http
        .get("/dynamic/warning/leaderAnalysis?date=" + date)
        .then(res => {
          if (res.code === 200) {
            var chart4 = echarts.init(document.getElementById("data4"));
            var option4 = {
              // tooltip: {
              //   trigger: "axis",
              //   formatter: function(params) {
              //     let index = params[0].dataIndex;
              //     let obj = res.data[index]; // 通过索引取当前项完整的接口返回值
              //     let str = `入井时间：${obj.psMineEntertime}<br/>
			        // 出井时间：${obj.psMineOuttime}<br/>
			        // 下井时长：${obj.psEnterDuration}小时<br/>`;
              //     return str;
              //   },
              //   axisPointer: {
              //     type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
              //   }
              // },
              tooltip: {
              trigger: "axis",
              // formatter: '{b} : {c}' + '人'
              formatter: function(params) {
                console.log(1730,params)
                  return (
                    "" +
                    params[0].name +
                    "\n" +
                    "\n" +
                    "" +
                    params[0].value +
                    "小时" +
                    "</br>" +
                    res.data.name[params[0].dataIndex]
                  );
              }
            },
              grid: {
                bottom: "20%",
                top: "10",
                left: "7%",
                right: "5%"
              },
              xAxis: {
                data: res.data.date,
                // 坐标轴
                axisLine: {
                  lineStyle: {
                    color: "#f2f2f2"
                  }
                },
                // 坐标值标注
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#fff"
                  }
                }
              },
              yAxis: {
                // 坐标轴
                axisLine: {
                  show: false
                },
                // 坐标值标注
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#fff"
                  }
                },
                // 分格线
                splitLine: {
                  lineStyle: {
                    color: "#3f4d61"
                  }
                }
              },
              series: [
                {
                  type: "bar",
                  barWidth: 20,
                  itemStyle: {
                    normal: {
                      color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                          {
                            offset: 0,
                            color: "#00d386" // 0% 处的颜色
                          },
                          {
                            offset: 1,
                            color: "#0076fc" // 100% 处的颜色
                          }
                        ],
                        globalCoord: false // 缺省为 false
                      },
                      barBorderRadius: 15
                    }
                  },
                  // barWidth: 7,
                  data: res.data.num
                }
              ]
            };

            chart4.setOption(option4);
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.isred {
  color: red !important;
}
.warning {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../../../assets/images/back.png") no-repeat;
  background-size: 100% 100%;
  overflow: auto;
  display: flex;
}
.warning-main {
  width: 100%;
  height: auto;
  // background: rgb(251, 196, 205, 0.2);
  box-sizing: border-box;
  padding: 0 10px;
  // margin: auto;
  ul {
    display: flex;
    // flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    li:not(:last-child) {
      margin-bottom: 0.2rem;
    }
    li:nth-child(5) {
      margin-bottom: 0;
    }
    li {
      width: 49.5%;
      height: 2.72rem;
      background: url("../../../assets/images/img13.png") no-repeat;
      background-size: 100% 100%;
      padding: 0.2rem;
      h1 {
        font-size: 0.18rem;
        color: #00f6ff;
      }
      .text {
        width: 100%;
        height: 0.42rem;
        // background: pink;
        color: #fff;
        margin-top: 0.15rem;
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3; //多行在这里修改数字即可，这里显示3行
          -webkit-box-orient: vertical;
        }
      }
      .head {
        display: flex;
      }
      .text1 {
        width: 100%;
        height: 0.42rem;
        // background: pink;
        color: #fff;
        margin: 0rem auto;
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; //多行在这里修改数字即可，这里显示3行
          -webkit-box-orient: vertical;
        }
        p:nth-child(1) {
          font-size: 0.16rem;
          font-weight: bold;
          margin: 0.1rem 0;
          text-align: center;
        }
      }
      .risk {
        width: 100%;
        display: flex;
      }
      .duibiimg {
        width: 35%;
        height: 115px;
        background: red;
        position: absolute;
        top: 34%;
        left: 57%;
        background: url("../../../assets/images/duibi.png") no-repeat;
        background-size: 100% 100%;
        .textcenter {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          display: flex;
          color: #39f6b2;
        }
        .titletext {
          position: absolute;
          left: 33%;
          top: -20%;
          color: #fff;
        }
        .textone {
          color: #fff;
          text-align: center;
          p:nth-child(1) {
            position: absolute;
            left: 4%;
            top: 30%;
          }
          p:nth-child(2) {
            position: absolute;
            left: 4%;
            top: 50%;
          }
        }
        .texttwo {
          color: #fff;
          text-align: center;
          p:nth-child(1) {
            position: absolute;
            left: 84%;
            top: 30%;
          }
          p:nth-child(2) {
            position: absolute;
            left: 84%;
            top: 50%;
          }
        }
      }
    }
  }
}
::v-deep .el-input--medium .el-input__inner {
  height: 26px;
  line-height: 26px;
  border: 1px solid #074e83;
  background: #06244ec9 !important;
  color: #ccc;
}
::v-deep .el-input__suffix {
  top: 6px;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #1a4c99 !important;
}
.el-select-dropdown__item {
  color: #fff !important;
}
</style>
<style lang="scss" scoped>
::v-deep .el-input--mini .el-input__inner {
  border: 1px solid #074e83 !important;
  background: #06244ec9 !important;
  color: #ccc !important;
}
.el-input--mini .el-input__inner {
  border: 1px solid #074e83 !important;
  background: #06244ec9 !important;
  color: #ccc !important;
}
.el-select-dropdown__item {
  color: #fff !important;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #1a4c99 !important;
}
::v-deep .el-select .el-input.is-focus .el-input__inner {
  border: 1px solid #074e83;
  background: #06244ec9 !important;
  color: #ccc;
}
::v-deep.el-input--medium .el-input__icon{
  line-height: 26px;
}

::v-deep .el-dialog {
  background: url("../../../assets/img/dialogback.png") no-repeat !important;
  background-size: 100% 100% !important;
  padding: 0.2rem 0.4rem 0.3rem !important;
}
::v-deep .el-dialog__title {
  color: #fff !important;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(6, 26, 57, 0.8) !important;
}
</style>
